<template>
  <div class="margin-top">
    <div class="panel-container">
      <div class="panel-content content-1 content-view">
        <div class="panel-title">数据概况</div>
        <div class="panel-line">
          <div class="panel-item" @click="handleViewClick('')">
            <div class="text-box">
              <div class="text-name">总量</div>
              <div class="text-num">{{ viewData.total || 0 }}</div>
            </div>
            <div class="icon-box">
              <i class="icon el-icon-s-order"></i>
            </div>
          </div>
          <div class="panel-item logo-orange" @click="handleViewClick(1)">
            <div class="text-box">
              <div class="text-name">推送中</div>
              <div class="text-num">{{ viewData.w1 || 0 }}</div>
            </div>
            <div class="icon-box">
              <i class="icon el-icon-chat-square"></i>
            </div>
          </div>
          <div class="panel-item warning" @click="handleViewClick(4)">
            <div class="text-box">
              <div class="text-name">推送完毕</div>
              <div class="text-num">{{ viewData.w4 || 0 }}</div>
            </div>
            <div class="icon-box">
              <i class="icon el-icon-document-checked"></i>
            </div>
          </div>
          <div class="panel-item logo-blue" @click="handleViewClick(2)">
            <div class="text-box">
              <div class="text-name">成交待核实</div>
              <div class="text-num">{{ viewData.w2 || 0 }}</div>
            </div>
            <div class="icon-box">
              <i class="icon el-icon-s-order"></i>
            </div>
          </div>
          <div class="panel-item" @click="handleViewClick(3)">
            <div class="text-box">
              <div class="text-name">已成交</div>
              <div class="text-num">{{ viewData.w3 || 0 }}</div>
            </div>
            <div class="icon-box">
              <i class="icon el-icon-success"></i>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="panel-container">
      <div class="panel-content content-2">
        <div class="panel-line space-between">
          <div class="panel-title">员工发布量</div>
          <el-button type="text" style="padding: 0" @click="handleMore">查看更多>></el-button>
        </div>
        <el-table stripe :data="userPub" @row-click="handleRowClick" size="mini" :header-cell-style="{ background: '#F5F5F5', color: '#000000' }" ref="table1" style="width: 100%">
          <af-table-column align="center" header-align="center" show-overflow-tooltip prop="pub_man_name" label="姓名"> </af-table-column>
          <af-table-column align="center" header-align="center" show-overflow-tooltip prop="total" label="发布量"> </af-table-column>
          <af-table-column align="center" header-align="center" show-overflow-tooltip prop="1" label="AI外呼"> </af-table-column>
          <af-table-column align="center" header-align="center" show-overflow-tooltip prop="2" label="员工挖掘"> </af-table-column>
          <af-table-column align="center" header-align="center" show-overflow-tooltip prop="3" label="社群"> </af-table-column>
          <af-table-column align="center" header-align="center" show-overflow-tooltip prop="4" label="新媒体"> </af-table-column>
          <af-table-column align="center" header-align="center" show-overflow-tooltip prop="5" label="其他"> </af-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script>
import { apiNoShareCount1 } from '@/api/assetsAlone'

export default {
  name: 'Panel1',
  props: {
    time: Object,
  },
  data() {
    return {
      viewData: {},
      userAccept: [],
      userPub: [],
    }
  },
  watch: {
    time: function () {
      this.getData()
    },
  },
  activated() {
    this.$refs.table1 && this.$refs.table1.doLayout()
    this.$refs.table2 && this.$refs.table2.doLayout()
  },
  mounted() {},
  destroyed() {},
  methods: {
    getData() {
      apiNoShareCount1(this.time).then((res) => {
        const { data, user_accept, user_pub } = res
        this.viewData = data
        this.userAccept = user_accept
        this.userPub = user_pub
        this.$refs.table1 && this.$refs.table1.doLayout()
        this.$refs.table2 && this.$refs.table2.doLayout()
      })
    },
    handleRowClick(row) {
      this.$store.dispatch('permission/routeAuthorization', 'AloneManagement').then((res) => {
        const { start_time, end_time } = this.time
        this.$bus.$emit('forceUpdate', 'AloneManagement')
        this.$router.push({
          path: '/assetsAlone/aloneManagement',
          query: { pub_man_id: row.pub_man_id, start_time, end_time },
        })
      })
    },
    handleMore() {
      this.$store.dispatch('permission/routeAuthorization', 'AloneManagement').then((res) => {
        const { start_time, end_time } = this.time
        this.$bus.$emit('forceUpdate', 'AloneManagement')
        this.$router.push({
          path: '/assetsAlone/aloneManagement',
          query: { start_time, end_time },
        })
      })
    },
    handleViewClick(tab) {
      this.$store.dispatch('permission/routeAuthorization', 'AloneManagement').then((res) => {
        const { start_time, end_time } = this.time
        this.$bus.$emit('forceUpdate', 'AloneManagement')
        this.$router.push({
          path: '/assetsAlone/aloneManagement',
          query: { tab, start_time, end_time },
        })
      })
    },
  },
}
</script>

<style scoped lang="scss">
.panel-line {
  align-items: stretch;
}
.content-1 {
  .panel-box {
    flex-grow: 1;
    margin-right: 30px;
    &.panel-box1 {
      display: flex;
      justify-content: center;
      align-items: stretch;
    }
    &:last-child {
      margin: 0;
    }
  }
  .panel-item {
    cursor: pointer;
    width: 100%;
    margin-bottom: 10px;
    &:last-child {
      margin: 0;
    }
  }
}
.margin-top {
  margin-top: 62px;
}
</style>
